<template>
  <!-- 比赛列表展示 -->
  <div id="box" ref="theBox">
    <van-collapse class='tittle' v-model="activeNames" v-if='footBalls.length'>
      <van-collapse-item v-for='(footerBall,index) in footBalls' :key='index' :title='collapseTitles[index]' :name="index">
        <!-- 玩法 -->
        <div :id='"mixBox"+index' class='mixBox'>
          <div class='cont' v-for='(match,index2) in footerBall' :key='index2'>
            <div class='left'>
              <p class="weeks">{{match.week + " " + match.week_no}}</p>
              <div>
                <p>{{match.cup}}</p>
                <p>开赛{{match.jtime}}</p>
              </div>
            </div>
            <div class='right'>
              <div class='info'>
                <div class='team'>
                  <p><b>[主]</b> <em class='post' v-if="match.home_position">{{`[${match.home_position}]`}}</em> <span>{{match.home}}</span> </p>
                </div>
                <div class='vs'>VS</div>
                <div class='team'>
                  <p><span>{{match.guest}}</span> <em class="post" v-if="match.guest_position">{{`[${match.guest_position}]`}}</em> <b>[客]</b></p>
                </div>
                <div>
                  <van-tag v-if="match.cbtbool" type="danger">已停售</van-tag>
                  <!-- <van-tag v-if="match.cbt === 2" type="danger">已停售</van-tag> -->
                  <!-- <van-tag v-else-if="match.cbt === 1" type="success">已开售</van-tag> -->
                  <!-- <van-tag v-else-if="match.cbt === 0" type="primary">待开售</van-tag> -->
                </div>
              </div>
              <table class='table0'>
                <tbody>
                  <tr :class='match.single === 1 ? "active" : ""'>
                    <td class='tagpoly black'>
                      <span>0</span>
                      <div v-if='match.single === 1'>
                        <img src="@/assets/image/ico_danguan.png">
                      </div>
                    </td>
                    <template v-if="match.win != '0.00'">
                      <td class="cell" :class="{ 'sel': selectedItems.includes(`${match.id}-${itm.nameCode}`) }"
                        @click="handleSelectedItem('had', itm, match)" v-for="(itm, idx) in oddsHeaderCodeFootball[0]"
                        :key="idx">
                        <span>{{ itm.nameStr }}</span>
                        <em>
                          {{ match[itm.nameCode] }}
                          <i v-if="match.hadChanges"
                            :class="match.hadChanges[itm.nameCode][0]">{{ match.hadChanges[itm.nameCode][1] }}</i>
                        </em>
                      </td>
                    </template>
                    <td colspan="3" v-else>
                      <div class='no_sale'>未开售</div>
                    </td>

                    <td class='all' :class="{ 'notempty': mixChooseNum[match.id] }" rowspan='2'
                      @click='handleOpenAllPlay(match)'>
                      <template v-if="mixChooseNum[match.id]">
                        <p>已选</p>
                        <p>{{ mixChooseNum[match.id] }}项</p>
                      </template>
                      <template v-else>
                        <p>展开</p>
                        <p>全部</p>
                      </template>
                    </td>
                  </tr>
                  <tr :class='match.hhad_single === 1 ? "active" : ""'>
                    <td class='tagpoly' :class="match.polygoal > 0 ? 'red' : 'green'">
                      <span>{{ match.polygoal > 0 ? '+' : '' }}{{ match.polygoal }}</span>
                      <div v-if='match.hhad_single === 1'>
                        <img src="@/assets/image/ico_danguan.png">
                      </div>
                    </td>
                    <template v-if="match.hhad_win != '0.00'">
                      <td class="cell" :class="{ 'sel': selectedItems.includes(`${match.id}-${itm.nameCode}`) }"
                        @click="handleSelectedItem('hhad', itm, match)" v-for="(itm, idx) in oddsHeaderCodeFootball[1]"
                        :key="idx">
                        <span>{{ itm.nameStr }}</span>
                        <em>
                          {{ match[itm.nameCode] }}
                          <i v-if="match.hhadChanges"
                            :class="match.hhadChanges[itm.nameCode][0]">{{ match.hhadChanges[itm.nameCode][1] }}</i>
                        </em>
                      </td>
                    </template>
                    <td colspan="3" v-else>
                      <div class='no_sale'>未开售</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div class='not' v-if='!footBalls.length'>
      <img src="@/assets/image/no_message.png">
      <p>暂无比赛数据</p>
    </div>
  </div>
  <!-- 展开全部赔率信息 -->
  <van-popup v-model:show="show" :overlay-style="{zIndex: 5002}" :style="{zIndex: 5002}" class="popUp">
    <div class='allPlay'>
      <div class='top'>
        <div class='left'>
          <p><span>[主]</span><em class='post' v-if="currentMatchInfo.home_position">{{`[${currentMatchInfo.home_position}]`}}</em>{{currentMatchInfo.home}}</p>
        </div>
        <div class='right'>
          <p>{{currentMatchInfo.guest}}<em class="post" v-if="currentMatchInfo.guest_position">{{`[${currentMatchInfo.guest_position}]`}}</em><span>[客]</span></p>
        </div>
      </div>
      <div class="popcont">
        <!-- 串关 -->
        <div class="tablebox cshad" :class='{"cssingle": currentMatchInfo.single === 1}'>
          <div class="bg">0</div>
          <template v-if="currentMatchInfo.win != '0.00'">
            <ul>
              <li :class="{'sel': selectedItems.includes(`${currentMatchInfo.id}-${itm.nameCode}`)}" @click="handleSelectedItem('had', itm, currentMatchInfo)" v-for="(itm, idx) in oddsHeaderCodeFootball[0]" :key="idx">
                <b>{{itm.nameStr}}</b>
                <span>
                  {{currentMatchInfo[itm.nameCode]}}
                  <i v-if="currentMatchInfo.hadChanges" :class="currentMatchInfo.hadChanges[itm.nameCode][0]">{{currentMatchInfo.hadChanges[itm.nameCode][1]}}</i>
                </span>
              </li>
            </ul>
          </template>
          <p class="nosale" v-else>未开售</p>
          <i v-if="currentMatchInfo.single === 1" class="ico">单</i>
        </div>
        <div class="tablebox cshhad" :class='{"cssingle": currentMatchInfo.hhad_single === 1}'>
          <div class="bg" :class="currentMatchInfo.polygoal>0?'bgred':'bggreen'">{{currentMatchInfo.polygoal}}</div>
          <template v-if="currentMatchInfo.hhad_win != '0.00'">
            <ul>
              <li :class="{'sel': selectedItems.includes(`${currentMatchInfo.id}-${itm.nameCode}`)}" @click="handleSelectedItem('hhad', itm)" v-for="(itm, idx) in oddsHeaderCodeFootball[1]" :key="idx">
                <b>{{itm.nameStr}}</b>
                <span>
                  {{currentMatchInfo[itm.nameCode]}}
                  <i v-if="currentMatchInfo.hhadChanges" :class="currentMatchInfo.hhadChanges[itm.nameCode][0]">{{currentMatchInfo.hhadChanges[itm.nameCode][1]}}</i>
                </span>
              </li>
            </ul>
          </template>
          <p class="nosale" v-else>未开售</p>
          <i v-if="currentMatchInfo.hhad_single === 1" class="ico">单</i>
        </div>
        <!-- 比分 -->
        <div class="tablebox cscrs" :class='{"cssingle": currentMatchInfo.crs_single === 1}'>
          <div class="bg">比分</div>
          <template v-if="currentMatchInfo.w10 != '0.00'">
            <ul>
              <li :class="[itm.nameCode, {'sel': selectedItems.includes(`${currentMatchInfo.id}-${itm.nameCode}`)}]" @click="handleSelectedItem('crs', itm)" v-for="(itm, idx) in oddsHeaderCodeFootball[2]" :key="idx">
                <b>{{itm.nameStr}}</b>
                <span>
                  {{toFix(currentMatchInfo[itm.nameCode])}}
                  <i v-if="currentMatchInfo.crsChanges" :class="currentMatchInfo.crsChanges[itm.nameCode][0]">{{currentMatchInfo.crsChanges[itm.nameCode][1]}}</i>
                </span>
              </li>
            </ul>
          </template>
          <p class="nosale" v-else>未开售</p>
          <i v-if="currentMatchInfo.crs_single === 1" class="ico">单</i>
        </div>
        <!-- 总进球 -->
        <div class="tablebox csttg" :class='{"cssingle": currentMatchInfo.ttg_single === 1}'>
          <div class="bg">总进球</div>
          <template v-if="currentMatchInfo.a0 != '0.00'">
            <ul>
              <li :class="[itm.nameCode, {'sel': selectedItems.includes(`${currentMatchInfo.id}-${itm.nameCode}`)}]" @click="handleSelectedItem('ttg', itm)" v-for="(itm, idx) in oddsHeaderCodeFootball[3]" :key="idx">
                <b>{{itm.nameStr}}</b>
                <span>
                  {{currentMatchInfo[itm.nameCode]}}
                  <i v-if="currentMatchInfo.ttgChanges" :class="currentMatchInfo.ttgChanges[itm.nameCode][0]">{{currentMatchInfo.ttgChanges[itm.nameCode][1]}}</i>
                </span>
              </li>
            </ul>
          </template>
          <p class="nosale" v-else>未开售</p>
          <i v-if="currentMatchInfo.ttg_single === 1" class="ico">单</i>
        </div>
        <!-- 半全场 -->
        <div class="tablebox cshafu" :class='{"cssingle": currentMatchInfo.hafu_single === 1}'>
          <div class="bg">半全场</div>
          <template v-if="currentMatchInfo.ss != '0.00'">
            <ul>
              <li :class="[itm.nameCode, {'sel': selectedItems.includes(`${currentMatchInfo.id}-${itm.nameCode}`)}]" @click="handleSelectedItem('hafu', itm)" v-for="(itm, idx) in oddsHeaderCodeFootball[4]" :key="idx">
                <b>{{itm.nameStr}}</b>
                <span>
                  {{currentMatchInfo[itm.nameCode]}}
                  <i v-if="currentMatchInfo.hafuChanges" :class="currentMatchInfo.hafuChanges[itm.nameCode][0]">{{currentMatchInfo.hafuChanges[itm.nameCode][1]}}</i>
                </span>
              </li>
            </ul>
          </template>
          <p class="nosale" v-else>未开售</p>
          <i v-if="currentMatchInfo.hafu_single === 1" class="ico">单</i>
        </div>

        <div class='btn'>
          <div class='left' @click='handleCancel'>取消</div>
          <div class='right' @click='handleCancel'>确定</div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useCalcStore } from "@/stores";
import { oddsHeaderCodeFootball } from "@/utils/data";

const calc = useCalcStore() // 竞猜store
const { footBalls, orderData } = storeToRefs(calc)

// 当前订单数据
const selected = ref({})
let tempSelectMatch = null;
function dataInit(){
  tempSelectMatch = sessionStorage.getItem('tempSelectMatch');
  if (tempSelectMatch) {
    selected.value = onSetNewOrderData2(JSON.parse(tempSelectMatch));
  } else {
    selected.value = JSON.parse(JSON.stringify(orderData.value))
  }
}
onDeactivated(()=>{
  if (tempSelectMatch){
    sessionStorage.removeItem('tempSelectMatch')
  }
})
onActivated(dataInit)

// 折叠面板活跃状态
const activeNames = ref([0, 1, 2])
const collapseTitles = computed(() => {
  return footBalls.value.map((itms) => `${itms[0].showData} ${itms[0].week} 共${itms.length}场`)
})

const theBox = ref()
onMounted(() => {
  nextTick(() => {
    dataInit()
    if(footBalls.value.length){
      activeNames.value = footBalls.value.map((itm, index) => index)
    }
    // 获取屏幕高度
    const height = document.getElementById('app').clientHeight
    const size = document.querySelector('html').style.fontSize.replace('px', '')
    // 2.88+2.7
    theBox.value.style.height = height - 2.7 * size + 'px'
  })
})

// 选号功能
function handleSelectedItem(play, oddinfo, match) {
  if (!match) match = currentMatchInfo.value
  const id = match.id
  // 根据比赛id创建订单数组
  if (!selected.value[id]) {
    selected.value[id] = []
  }
  const datas = {
    matchId: id,
    type: play,
    play: oddinfo.nameCode,
    result: oddinfo.nameStr,
    odds: match[oddinfo.nameCode],
    single: play === 'had' ? match.single : match[`${play}_single`],
    home: match.home,
    guest: match.guest,
    home_position: match.home_position,
    guest_position: match.guest_position,
    week: match.week,
    weekNum: (match.week_num + match.week_no),
    weekno: match.week_no,
    cup: match.cup,
    polygoal: match.polygoal,
    jtime: match.stime,
    h_icon: match.h_icon,
    g_icon: match.g_icon
  }
  // 判断是否为选中
  const teststr = `${id}-${oddinfo.nameCode}`
  if (selectedItems.value.includes(teststr)) {
    selected.value[id].splice(findIndex(selected.value[id], datas), 1)
  } else {
    selected.value[id].push(datas)
  }
  // 限制选取 比赛场数
  if (Object.keys(selected.value).length > 8) {
    selected.value[id].splice(findIndex(selected.value[id], datas), 1)
    showToast('最多选取8场比赛')
  }
  // 如果比赛订单数组为空 清除当前数组
  if (selected.value[id].length === 0) {
    delete selected.value[id]
  }
  // 修改数据
  calc.saveData(selected.value)
}
// 记录选择的玩法信息
const selectedItems = computed(() => {
  const ary = []
  Object.entries(selected.value).forEach(([key, ary1]) => {
    for (let i = 0; i < ary1.length; i++) {
      ary.push(`${key}-${ary1[i].play}`)
    }
  })
  return ary
})
// 遍历计算选中数量
const mixChooseNum = computed(() => {
  const obj = {}
  Object.entries(selected.value).forEach(([key, ary]) => {
    obj[key] = ary.length
  })
  return obj
})

// 弹框开关
const show = ref(false)
const currentMatchInfo = ref({}) // 当前比赛数据
function handleOpenAllPlay (match) {
  show.value = true
  currentMatchInfo.value = match
}
function handleCancel() {
  show.value = false
}

// 补充完整奖金优化中需要的非必要参数
function onSetNewOrderData2(obj) {
  const matches = footBalls.value.slice().flat()
  let resobj = {}
  for (const key in obj) {
    const idx = matches.findIndex(v => v.id === key)
    if (idx > -1) {
      const match = matches[idx]
      resobj[key] = []
      for (let i = 0; i < obj[key].length; i++) {
        const element = obj[key][i]
        // 在内参详情中快速选择的玩法，数据不完整需要再次补充后使用
        if (!element.odds && !element.home && !element.guest) {
          element.odds = match[element.play]
          element.single = element.type === 'had' ? match.single : match[`${element.type}_single`]
          element.home = match.home
          element.guest = match.guest
          element.home_position = match.home_position
          element.guest_position = match.guest_position
          element.week = match.week
          element.weekNum = (match.week_num + match.week_no)
          element.weekno = match.week_no
          element.cup = match.cup
          element.polygoal = match.polygoal
          element.jtime = match.stime
          element.h_icon = match.h_icon
          element.g_icon = match.g_icon
        }
        console.log(22222, element.weekNum)
        resobj[key].push(element)
      }
    }
  }
  // 修改数据
  calc.saveData(resobj)
  return resobj
}

// 数组中查找 对象是否存在 返回 index
function findIndex(arr, text) {
  let Index = null
  arr.forEach((item, index) => {
    if (JSON.stringify(item) === JSON.stringify(text)) {
      Index = index
    }
  })
  return Index
}

// 保留一位小数
function toFix (str) {
  return Number(str).toFixed(1)
}
</script>

<style lang="less" scoped>
// 所有的rem单位都得 x*50
.not{
  width:100%;
  height:100%;
  text-align: center;
  margin-top: 100px;
  img{
    display: inline-block;
    width:50%;
  }
  p{
    margin-top: 10px;
    font-size: 16px;
    color:#666;
  }
}
i{
  font-style: normal;
}
#box{
  background: var(--van-collapse-item-content-background-color);
  padding-bottom: 100px;
  overflow-y: scroll;
  -webkit-overflow-scrolling : touch;
}
.mixBox::-webkit-scrollbar{
  display:none;
}
.mixBox{
  .cont{
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      .weeks{
        margin-bottom: 10px;
        font-size: 12px;
        color:#333;
      }
      div{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        p{
          margin: 2.5px 0;
          font-size: 12px;
          color:#999;
        }
      }
      .btnbox{
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        >span{
          display: block;
          width: 45px;
          line-height: 21px;
          font-size: 12px;
          text-align: center;
          border-radius: 5px;
          background-color: #ff5b35;
          color: #fff;
        }
        &.done{
          >span{
            background-color: #999;
          }
        }
      }
    }
    .right{
      padding: 5px 10px 15px;
      width: 295px;
      border-radius: 7.5px;
      background: #fff;
      .info{
        height: 31px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .vs{
          width:10%;
          text-align: center;
          font-size: 13px;
          color:#666;
        }
        .team{
          width:50%;
          display: flex;
          align-items: center;
          justify-content: center;
          p{
            color:#666;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            b{
              font-weight: normal;
              font-size: 10px;
            }
            span{
              font-weight: bold;
              font-size: 13px;
              color:#333;
            }
            .post{
              font-style: normal;
              font-size: 10px;
              color: #999;
            }
          }
        }
        :deep(.van-tag) {
          width: 50px;
          font-size: 12px;
          transform: scale(0.8);
        }
      }
      .table0{
        width:100%;
        border-radius: 25px;
        border-spacing: 0.25px;
        border-collapse: separate;
        td{
          height: 35px;
          border: 1px solid #eee;
          text-align: center;
          span{
            font-size: 12px;
            color:#666;
          }
          em{
            margin-left: 2px;
            font-style: normal;
            color:#006ba4;
          }
          p{
            margin: 7.5px 0 5px;
            font-size:12px;
            text-align: center;
          }
          .up{
            color: #ea4748;
          }
          &.sel{
            background-color: #ea4748;
            span, em, p, .up, .down{
              color:#fff;
            }
          }
        }
        .no_sale{
          text-align: center;
          span{
            color:#999;
            font-size: 12px;
          }
        }
        .cell{
          width:75px;
        }
        .tagpoly{
          position: relative;
          width: 32.5px;
          div{
            position: absolute;
            left: 0;
            top:-16px;
            img{
              height: 16px;
            }
          }
          span{
            display: inline-block;
            margin-top: 2.5px;
            width: 17px;
            height: 18.5px;
            font-size: 12px;
            line-height: 18.5px;
            text-align: center;
            border-radius: 2.5px;
          }
          &.black{
            span{
              background-color: #666;
              color:#fff;
            }
          }
          &.red{
            span{
              background-color: #f5b8b8;
              color:#ff0000;
            }
          }
          &.green{
            span{
              background-color: #a4f1a0;
              color:#06862e;
            }
          }
        }
        .all{
          width: 35px;
          color: #0b6fdd;
          &.notempty{
            color: #ff0000;
          }
        }
        .active{
          td{
            height:37px;
          }
          td:nth-of-type(1){
            border-width: 1px!important;
            border-color: #2f7edc #eee #2f7edc #2f7edc;
            border-style: solid;
          }
          td:nth-of-type(2){
            border-width: 1px!important;
            border-color: #2f7edc #eee;
            border-style: solid;
          }
          td:nth-of-type(3){
            border-width: 1px!important;
            border-color: #2f7edc #eee;
            border-style: solid;
          }
          td:nth-of-type(4){
            border-width: 1px!important;
            border-color: #2f7edc #2f7edc #2f7edc #eee;
            border-style: solid;
          }
        }
      }
    }
  }
}
.popUp{
  max-width: 360px!important;
}
.allPlay{
  z-index: 2025;
  width: 360px;
  background-color: #eee;
  .top{
    height: 30px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div{
      width: 50%;
      height:100%;
      display: flex;
      justify-content: center;
      align-items: center;
      p{
        color:#000;
        font-size:14px;
        span{
          color:#999;
          font-size:10px;
        }
      }
      img{
        width:19px;
        height:19px;
        border-radius: 50%;
      }
      .post{
        font-style: normal;
        font-size: 10px;
        color: #999;
      }
    }
    .left{
      border-bottom:1px solid #ff5945;
      border-right:1px solid #eee;
      p{
        margin-right: 10px;
        span{
          margin-right:5px;
        }
      }
    }
    .right{
      border-bottom: 1px solid #4e66aa;
      p{
        margin-left: 10px;
        span{
          margin-left: 5px;
        }
      }
    }
  }
  .popcont{
    padding: 12px 5px 5px;
    .tablebox{
      position: relative;
      margin-bottom: 10px;
      border: 0.5px solid #eee;
      display: flex;
      align-items: center;
      .bg{
        width: 20px;
        font-size: 13px;
        text-align: center;
        background-color: #999;
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        &.bgred{
          background-color: #fe0000;
        }
        &.bggreen{
          background-color: #5cbd6c;
        }
      }
      ul{
        flex: 1;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        li{
          padding: 0 7px;
          height: 32px;
          border-bottom: 0.5px solid #eee;
          border-right: 0.5px solid #eee;
          display: flex;
          justify-content: space-between;
          align-items: center;
          b{
            font-weight: normal;
            font-size: 12px;
            line-height: 1;
          }
          span{
            font-size: 12px;
            color: #5ea3c5;
            line-height: 1;
          }
          .up{
            color: #ea4748;
          }
          &.sel{
            background-color: #ea4748;
            span, b, .up, .down{
              color:#fff;
            }
          }
        }
      }
      .nosale{
        height: 35px;
        background-color: #fff;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .ico{
        position: absolute;
        top: -13px;
        right: 0;
        width: 26px;
        font-style: normal;
        font-size: 9px;
        line-height: 13px;
        text-align: center;
        border-radius: 8px 8px 0 0;
        background-color: #2f7edb;
        color: #fff;
      }
      &.cshad, &.cshhad{
        ul{
          li{
            width: 33.333%;
            border-bottom-width: 0;
          }
        }
      }
      &.cshad{
        margin-bottom: 0;
      }
      &.cscrs{
        .bg{
          background-color: #feb338;
        }
        ul{
          li{
            flex-direction: column;
            //padding-top: 02.5px;
            //padding-bottom: 02.5px;
            padding: 2.5px 0;
            width: 14.285%;
            &.crs_same{
              width: 42.857%;
            }
            &.crs_win, &.crs_lose{
              width: 28.571%;
            }
            &:nth-last-child(1),
            &:nth-last-child(2),
            &:nth-last-child(3),
            &:nth-last-child(4),
            &:nth-last-child(5),
            &:nth-last-child(6){
              border-bottom-width: 0;
            }
          }
        }
      }
      &.csttg{
        .bg{
          background-color: #0182cd;
        }
        ul{
          li{
            width: 25%;
            &:nth-last-child(1),
            &:nth-last-child(2),
            &:nth-last-child(3),
            &:nth-last-child(4){
              border-bottom-width: 0;
            }
          }
        }
      }
      &.cshafu{
        .bg{
          background-color: #f9603b;
        }
        ul{
          li{
            width: 33.333%;
            &:nth-last-child(1),
            &:nth-last-child(2),
            &:nth-last-child(3){
              border-bottom-width: 0;
            }
          }
        }
      }
      &.cssingle{
        border: 1.5px solid #2f7edc;
      }
    }
    .btn{
      width:100%;
      justify-content: space-between;
      align-items: center;
      display: flex;
      div{
        text-align: center;
        border-radius: 4px;
        line-height: 35px;
        height:35px;
        font-size:14px;
        letter-spacing: 5px;
      }
      .left{
        width:100px;
        background: #dddddd;
        color:#333;
      }
      .right{
        width:190px;
        background: #eb6100;
        color:#fff;
      }
    }
  }
}
</style>
